<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>支付</title>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/style-exp.css">
	<link rel="stylesheet" href="css/ystyle.css">
</head>
<body>
<div class="fix-container">
	<div class="loading">加载中...</div>
	<div class="container col-md-11 col-xs-12 col-sm-12 col-md-offset-1">
		<div class="pull-left  col-md-3 visible-md visible-lg">
			<div class="myBuy col-md-10">充值</div>
			<ul class="myStepTips  col-md-9 col-md-offset-2 blank">
				<li class="active"><span>1</span>选择银行</li>
				<li><span>2</span>确认订单</li>
				<li><span>3</span>订单完成</li>
			</ul>
			<ul class="myStepTips  col-md-9 col-md-offset-2 alipay">
				<li class="active"><span>1</span>确认订单</li>
				<li ><span>2</span>订单完成</li>
			</ul>
		</div>
		<!-- 小屏幕 -->
		<div id="myStepTips1-wrap">
			<div class="col-sm-12 col-xs-12 visible-xs visible-sm">

				<ul class="myStepTips1 col-md-10 col-md-offset-1 blank">
					<li class="active"><span>1</span>选择银行</li>
					<li><span>2</span>确认订单</li>
					<li><span>3</span>订单完成</li>
				</ul>
				<ul class="myStepTips1  col-md-9 col-md-offset-2 alipay">
					<li class="active"><span>1</span>确认订单</li>
					<li ><span>2</span>订单完成</li>
				</ul>
			</div>
		</div>
		<div class="pull-right col-md-9 col-xs-12">
			<!-- 银行列表 -->
			<div class="col-md-12 mytabs" id="tab1">
				<div class="orderDetail col-md-12">
					<div class="tit">订单信息</div>
					<ul>
						<li>订单号: <span class="orderNumber"></span> </li>
						<li>应付金额: ￥<span class="money" class="text-danger f-16"></span> </li>
					</ul>
				</div>

				<div class="baklist blank col-md-12 col-xs-12 visible-md visible-lg">
					<div class="tit">银行列表</div>
					<ul class="bank-content-link">
						<li >
							<div class="radio">
								<input id="radio-1" name="radio" type="radio" checked="">
								<label for="radio-1" class="radio-label"><a href="##"><img src="./bankImg/95588.png"></a></label>
							</div>

						</li>
						<li>
							<div class="radio">
								<input id="radio-2" name="radio" type="radio" >
								<label for="radio-2" class="radio-label"><a href="##"><img src="./bankImg/95533.png"></a></label>
							</div>

						</li>
						<li>
							<div class="radio">
								<input id="radio-3" name="radio" type="radio" >
								<label for="radio-3" class="radio-label">	<a href="##"><img src="./bankImg/95566.png"></a></label>
							</div>

						</li>
						<li>
							<div class="radio">
								<input id="radio-4" name="radio" type="radio" >
								<label for="radio-4" class="radio-label"><a href="##"><img src="./bankImg/95559.png"></a></label>
							</div>

						</li>
						<li>
							<div class="radio">
								<input id="radio-5" name="radio" type="radio" >
								<label for="radio-5" class="radio-label"><a href="##"><img src="./bankImg/95599.png"></a></label>
							</div>

						</li>
						<li>
							<div class="radio">
								<input id="radio-6" name="radio" type="radio" >
								<label for="radio-6" class="radio-label"><a href="##"><img src="./bankImg/95555.png"></a></label>
							</div>

						</li>
						<li>
							<div class="radio">
								<input id="radio-15" name="radio" type="radio" >
								<label for="radio-15" class="radio-label">	<a href="##"><img src="./bankImg/pinganyinhang_xin.jpg"></a></label>
							</div>

						</li>
						<li>
							<div class="radio">
								<input id="radio-7" name="radio" type="radio" >
								<label for="radio-7" class="radio-label"><a href="##"><img src="./bankImg/95580.png"></a></label>
							</div>

						</li>

						<li>
							<div class="radio">
								<input id="radio-8" name="radio" type="radio" >
								<label for="radio-8" class="radio-label"><a href="##"><img src="./bankImg/95595.png"></a></label>
							</div>

						</li>
						<li>
							<div class="radio">
								<input id="radio-9" name="radio" type="radio" >
								<label for="radio-9" class="radio-label"><a href="##"><img src="./bankImg/95568.png"></a></label>
							</div>

						</li>
						<li>
							<div class="radio">
								<input id="radio-10" name="radio" type="radio" >
								<label for="radio-10" class="radio-label"><a href="##"><img src="./bankImg/95528.png"></a></label>
							</div>

						</li>
						<li>
							<div class="radio">
								<input id="radio-11" name="radio" type="radio" >
								<label for="radio-11" class="radio-label"><a href="##"><img src="./bankImg/95558.png"></a></label>
							</div>

						</li>
						<li>
							<div class="radio">
								<input id="radio-12" name="radio" type="radio" >
								<label for="radio-12" class="radio-label"><a href="##"><img src="./bankImg/95561.png"></a></label>
							</div>

						</li>
						<li>
							<div class="radio">
								<input id="radio-14" name="radio" type="radio" >
								<label for="radio-14" class="radio-label"><a href="##"><img src="./bankImg/95508.png"></a></label>
							</div>

						</li>
						<li>
							<div class="radio">
								<input id="radio-16" name="radio" type="radio" >
								<label for="radio-16" class="radio-label"><a href="##"><span class="otherBank">其他银行</span></a></label>
							</div>

						</li>
					</ul>
					<div class="btnList">
						<button type="button" class="btn  nextStep" id="nextStep1">下一步</button>
					</div>

				</div>
				<!-- 小屏幕 -->
				<div class="baklist blank col-xs-12 col-sm-12 visible-xs visible-sm">
					<div class="tit col-xs-12 col-sm-12">银行列表</div>
					<select class="form-control col-xs-6 col-sm-6">
						<option>中国工商银行</option>
						<option>中国建设银行</option>
						<option>中国银行</option>
						<option>交通银行</option>
						<option>中国农业银行</option>
						<option>招商银行</option>
						<option>平安银行</option>
						<option>中国邮政银行</option>
						<option>中国光大银行</option>
						<option>中国民生银行</option>
						<option>浦发银行</option>
						<option>中信银行</option>
						<option>兴业银行</option>
						<option>广发银行</option>
						<option>其他银行</option>
					</select>
					<div class="btnList col-xs-12 col-sm-12">
						<button type="button" class="btn btn-success nextStep" >下一步</button>
					</div>
				</div>
			</div>
			<div class="col-md-11 mytabs bankList" id="tab2">
				<div class="orderDetailConfirm">
					<div class="orderDetailTop">
						<div class="fix-title-for-qrcode-hide">
							<div class="tit">订单信息</div>
							<ul class="orderDetailConfirmInfo">
								<li>应付金额: <span>￥</span><span class="source"></span><a href="##" class="priceCopy Copy">复制</a></li>
								<!--							<li>单价: <span>￥</span><span class="price"></span></li>-->
								<!--							<li>数量: <span>USDT </span><span class="dist"></span></li>-->
								<li>订单号: <span class="orderNumber"></span></li>
							</ul>
						</div>
						<div class="fix-title-for-qrcode-show tit" style="display:none">
							应付金额: <span>￥</span><span class="source"></span><a href="##" class="priceCopy Copy" style="font-weight:normal">复制</a>
						</div>
					</div>
					<div id="el_of_wx2bank"></div>
					<div class="blank">
						<div class="orderDetailBottom ">
							<div class="tit blank">请向以下账号汇款</div>
							<ul class="orderDetailBottomInfo blank col-md-8">
								<li style="color: red">注意：支付完成后，请务必点击“我已完成汇款”，否则无法及时到账！</li>
								<li>汇款银行: <span class="bank_name"></span> </li>
								<li class="fix-copy-button">银行卡号: <span class="rderNumber card_id"></span><a href="##" class="copy Copy float-none">复制</a></li>
								<li class="fix-copy-button">交易员: <span class="name"></span><a href="##" class="copy Copy float-none">复制</a></li>
								<li>请转入: <span class="text-danger">￥</span><span class="text-danger source f-16"></span> </li>
								<li><p style="color: red;font-size: 16px">备注：为了存款更快被区分，存款将不使用整数，虽然实际支付少了，但不影响到账金额。例如：提交存款100元，付款99.98元，实际到账100元。</p></li>
							</ul>
						</div>
						<div class="orderDetailBtn col-md-8" style="margin-bottom: 20px;margin-top:10px">
							<a href="##" class="copyBtn blank" data-toggle="modal" data-target=".bs-example-modal-sm">我已完成汇款</a>
							<a href="##" class="copyBtn canalBtn canalOrder" data-toggle="modal" data-target=".bs-example-modal-sm1">取消订单[20:00]</a>
						</div>
						<!--						<p style="color: red;font-size: 16px;line-height: 30px">备注：为了存款更快被区分，存款将不使用整数，虽然实际支付少了，但不影响到账金额。例如：提交存款100元，付款99.98元，实际到账100元。</p>-->

					</div>
					<div class="alipay">
						<div class="orderDetailBottom ">
							<div class="tit payTit d-none">请使用本人支付宝向以下二维码进行扫码支付</div>
							<div>
								<div class="col-md-8 pt-2 mb-0 justify-content-around d-flex align-items-center">
									<div id="el_of_qrcode"></div>
									<img src="" class="alipayImg payImg fix-alipay-img" data-toggle="modal" data-target=".bs-example-modal-md2">
								</div>
								<div class="col-md-8 mb-3 justify-content-around d-flex align-items-center flight-wrap">
									<div id="el_of_flight"></div>
								</div>
								<div class="col-md-8">
									<ul class="orderDetailBottomInfo col-md-12">
										<!--<li style="color: red">注意：支付完成后，请务必点击“我已扫码支付”，否则无法及时到账</li>-->
										<li style="color: red;font-weight:bold">注意：可直接扫码支付或者保存二维码到相册，打开支付宝扫码支付；若无法扫码支付，请点击按钮前往支付宝，进入飞行模式支付。</li>
										<li class="d-none">支付方式: <span class="">支付宝</span> </li>
										<li class="d-none">请转入: <span class="text-danger">￥</span><span class="text-danger source f-16"></span> </li>
										<!--										<li><p style="color: red;font-size: 16px">备注：为方便及时到账，请按指定金额付款。</p></li>-->
										<li><p class="">温馨提示：为了更快区分，存款将不使用整数，虽然实际支付少了，但不影响到账金额。</p></li>
									</ul>
									<div class="orderDetailPayBtn col-md-12 visible-lg visible-md" style="margin-bottom: 30px;">
										<div class="justify-content-around d-flex align-items-center">
											<a href="##" class="copyBtn  copyBtnPay fs8" data-toggle="modal" data-target=".bs-example-modal-sm">我已扫码支付</a>
											<a href="##" class="copyBtn canalBtn canalOrder copyBtnPay fs8" data-toggle="modal" data-target=".bs-example-modal-sm1">取消订单[20:00]</a>
										</div>
									</div>
									<!--									<p style="color: red;font-size: 16px;line-height: 30px">备注：为了存款更快被区分，存款将不使用整数，虽然实际支付少了，但不影响到账金额。例如：提交存款100元，付款99.98元，实际到账100元。</p>-->
								</div>
							</div>
						</div>

						<!-- 小屏 -->
						<!-- 要多维护一组完全一样的按钮，繁琐 -->
						<div class="orderDetailBtn col-md-8 visible-xs visible-sm">
							<div class="justify-content-around d-flex align-items-center" style="margin-bottom:30px">
								<a href="##" class="copyBtn alipay fs5" data-toggle="modal" data-target=".bs-example-modal-sm">我已扫码支付</a>
								<a href="##" class="copyBtn canalBtn canalOrder fs5" data-toggle="modal" data-target=".bs-example-modal-sm1">取消订单[20:00]</a>
							</div>
						</div>
					</div>
					<div class="alertMsg1"></div>
				</div>

			</div>

			<!-- 提交成功 -->
			<div class="col-md-8 col-sm-10 col-xs-12 mytabs" id="tab3">
				<div class="mySuccess col-xs-12 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
					<ul class="col-md-10 col-xs-12 col-sm-12">
						<li>三步轻松完成购买充值</li>
						<li class="mySub">
							<span class="glyphicon glyphicon-ok"></span>
						</li>
						<li><p>提交成功</p></li>
						<li>根据您的授权，您兑换的资产将自动支付到商户账单完成充值</li>
						<li>
							<div class="diot">
								<ul >
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
								</ul>
							</div>
							<ul class="myLUi">
								<li>订单完成</li>
								<li>卖家已接单并开始处理</li>
								<li>预计到账<span class="text-danger f-16">10</span>分钟内</li>
							</ul>
						</li>
						<li>
							<button type="button" class="btn goBack">5s 返回商家</button>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div><!-- container -->
</div>
	<!-- Modal -->
<div class="modal fade bs-example-modal-md2" id="modal2" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
	<div class="modal-dialog modal-md" role="document">
		<div class="modal-content justify-content-center d-flex align-items-center">
			<img src="" class="alipayImg  payImg">
		</div>
	</div>
</div>
	<div class="modal fade bs-example-modal-sm" id="modal1" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content comModal">
				<span  class="glyphicon glyphicon-remove close" aria-hidden="true" data-dismiss="modal"></span>
				<div class="comModalContent">
					<span class="glyphicon glyphicon-check comIcon"></span>
					<p class="lgtitle">确认汇款</p>
					<p class="mtitle">请确保您的汇款金额与订单金额一致</p>
					<p class="mtitle">如未汇款点击该按钮,可能会被系统列入黑名单</p>
				</div>
				<div class="comModaBtn">
					<a href="##" class="sureGive copyBtn ml blank">我已完成汇款</a>
					<a href="##" class="sureGive copyBtn ml alipay">我已扫码支付</a>
					<a href="##" class="priceCopy" data-dismiss="modal">点错了</a>
				</div>
				<!--	警告框-->
				<div class="alertMsg"></div>
			</div>
		</div>
	</div>
	<div class="modal fade bs-example-modal-sm1" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content comModal">
				<span class="glyphicon glyphicon-remove close" aria-hidden="true" data-dismiss="modal"></span>
				<div class="comModalContent">
<!--					<span class="glyphicon glyphicon-check comIcon"></span>-->
					<p class="lgtitle">确认取消订单</p>
<!--					<p class="mtitle">请确保您的汇款金额与订单金额一致</p>-->
<!--					<p class="mtitle">如汇款点击该按钮,可能会被系统列入黑名单</p>-->
				</div>
				<div class="comModaBtn" >
					<a href="##" class="copyBtn ml canalCom">确认</a>
					<a href="##" class="priceCopy disMiss" data-dismiss="modal">点错了</a>
				</div>
				<!--	警告框-->
				<div class="alertMsg"></div>
			</div>
		</div>
	</div>
	<div id="app"></div>
	<!-- JS -->
	<script src="api.js"></script>
	<!-- JS -->
	<script src="js/browser-polyfill.min.js"></script>
	<script src="js/browser.min.js"></script>

	<script src="js/jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/Alert.js" type="text/babel"></script>
	<script src="js/clipboard.min.js"></script>
	<script src="js/isPC.js"></script>
	<script src="js/init.js" type="text/babel"></script>

	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="Qrcode/jquery.qrcode.min.js"></script>
	<script src="Qrcode/QrcodeCard.js"></script>
	<script src="Flight/FlightMode.js"></script>
	<script src="Wx2Bank/Wx2Bank.js"></script>
</body>
</html>